<template>
    <div class="box">
        <!--图册操作-->
        <el-form ref="form" label-width="100px" style="width: 98%">
            <el-form-item label="大屏宽度：">
                {{panelDom.width}}
            </el-form-item>
            <el-form-item label="大屏高度：">
                {{panelDom.height}}
            </el-form-item>

            <el-form-item label="背景色：">
                <avue-input-color v-model="panelDom.backgroundColor"></avue-input-color>
            </el-form-item>
            <el-form-item label="背景图片：">
                <img :src="panelDom.backgroundImg" @click="showImg=true" width="100%" height="150px" alt="">
            </el-form-item>
            <el-form-item label="主题：">
                <div class="theme_box" :style="'backgroundColor:'+item.backgroundColor" v-for="(item,key) in themeMap" @click="setTheme(key)">
                    <div class="theme_plan"  :style="'backgroundColor:'+color" v-for="(color,i) in item.color" v-if="i<7"></div>
                </div>
            </el-form-item>
        </el-form>


        <el-dialog
                title="选择背景图"
                :visible.sync="showImg"
                width="50%">
            <el-row :gutter="20">
                <el-col :span="6" v-for="(item,index) in imgList" :key="index">
                    <img :src="item" width="100%" height="150px" alt="" @click="selectImg(item)"
                         style="margin-top: 20px;">
                </el-col>
            </el-row>
        </el-dialog>

    </div>
</template>

<script>
    //注入依赖
    import * as theme from '@/components/myChart/theme.js'

    export default {
        name: "index",
        computed: {
            //当前选中的值
            panelDom() {
                return this.$store.state.panelDom
            },
        },
        data() {
            return {
                //背景图选择弹框表示
                showImg: false,
                //默认图片集合
                imgList: [
                    require("@/assets/img/bg1.png"),
                    require("@/assets/img/bg2.png"),
                    require("@/assets/img/bg3.png"),
                    require("@/assets/img/bg4.jpg"),
                    require("@/assets/img/bg5.jpg"),
                    require("@/assets/img/bg6.jpg"),
                    require("@/assets/img/bg7.jpg"),
                    require("@/assets/img/bg8.jpg"),
                    require("@/assets/img/bg9.jpg"),
                    require("@/assets/img/bg10.jpg"),
                ],
                themeMap: {
                  vintage:theme.vintage,
                  dark:theme.dark,
                  westeros:theme.westeros,
                  essos:theme.essos,
                  wonderland:theme.wonderland,
                  walden:theme.walden,
                  chalk:theme.chalk,
                  infographic:theme.infographic,
                  macarons:theme.macarons,
                  roma:theme.roma,
                  shine:theme.shine,
                  purplePassion:theme.purplePassion,
                }
            }
        },

        methods: {
            selectImg(item) {
                this.panelDom.backgroundImg = item;
                this.showImg = false
            },

            //设置主题
            setTheme(key){
                this.panelDom.component.forEach(x=>{
                    if(x.option==null){
                        return;
                    }
                    if(x.option.echartOption==null){
                        return;
                    }
                    x.option.echartOption["theme"]=key;
                })
                //刷新面板
                this.$parent.$parent.refreshBox()
            }
        }
    }
</script>

<style scoped lang="scss">
    .box {
        width: 100%;
        flex: 1;
        color: white;

        ::v-deep .el-form-item__label {
            color: white;
        }

        .theme_box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: auto;
            height: 20px;
            overflow: hidden;
            border: 2px solid #eee;
            padding: 5px;
            border-radius: 4px;
            margin-bottom: 8px;
            cursor: pointer;
            .theme_plan {
                width: 20px;
                height: 20px;
                margin-bottom: 10px;
                margin-left: 2px;
                margin-right: 2px;
                display: inline-block;
                border-radius: 3px;
            }
        }
        .sel,.theme_box:hover{
          border: 2px solid #2cc82e;
        }
    }
</style>
